<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/detailed.css" />
		<link rel="stylesheet" type="text/css" href="css/common.css" />
		<link rel="stylesheet" type="text/css" href="css/reset.css" />
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	</head>

	<body>

		<head>
			<meta charset="UTF-8">
			<title>产品详细</title>
			<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
			<link rel="stylesheet" type="text/css" href="css/reset.css" />
			<link rel="stylesheet" type="text/css" href="css/common.css" />
			<link rel="stylesheet" type="text/css" href="css/find.css" />
		</head>

		<body>
			<header class="clearfix">
				<a href="index.html" class="fl">
					<div class="Back">
						<p>Back</p>
					</div>
				</a>
				<div class="envelope fr">
					<img src="img/xingxing.png" />
				</div>
				<div class="classify">
					产品详细
				</div>

			</header>
			<section>
				<div class="top_img">
					<img src="img/detailed_03.jpg" />
				</div>
				<div class="purchase clearfix">
					<div class="fl">
						<span>&yen;</span>
						<span>22</span>
					</div>
					<button class="fr">
					购买
				</button>
				</div>
				<div class="comment clearfix">
					<div class="fl">
						<img src="img/xingxing.png" />
						<span>好评度</span>
						<span>99%</span>
					</div>
					<div class="fr">
						<span>共605个评价></span>
					</div>
				</div>
				<div class="fit clearfix">
					<span>适用商户</span>
					<span class="fr"> 	&gt;</span>
				</div>
				<div class="sushi clearfix">
					<div class="fl">
						<img src="img/cate1_03.jpg" />
						<!--<div>正佳店</div>-->
					</div>

					<div>
						<h3>万岁寿司（正佳店）</h3>
						<div class="clearfix">
							<div class="fl">
								<img src="img/xingxing.png" />
							</div>
							<div class="fl">
								<img src="img/xingxing.png" />
							</div>
							<div class="fl">
								<img src="img/xingxing.png" />
							</div>
							<div class="fl">
								<img src="img/xingxing.png" />
							</div>
							<div class="fl">
								<img src="img/xingxing.png" />
							</div>
						</div>
					</div>
					<div></div>
				</div>
			</section>
			<script>
				document.body.style.height = window.innerHeight + "px";

				/*动态改变根元素字体大小*/
				function recalc() {
					//获取客户端宽度
					var clientWidth = document.documentElement.clientWidth;
					if(!clientWidth) return;
					// 字体大小   = 1个rem单位表示多少个像素（设备的宽度   /设计宽度）
					document.documentElement.style.fontSize = 40 * (clientWidth / 750) + 'px';
				}

				function initRecalc() {
					recalc();
					// if(浏览器支持横竖屏切换的事件){横竖屏事件}else{ resize事件 }
					var resizeEvt = 'osrientationchange' in window ? 'orientationchange' : 'resize';
					if(!document.addEventListener) return;
					window.addEventListener(resizeEvt, recalc, false);
					document.addEventListener('DOMContentLoaded', recalc, false);
				}
				initRecalc();
			</script>
		</body>

</html>